
import {Table, Button, Form, Input, Select, Modal,} from 'antd';
import React from 'react'
import  './PersonUser.css'
import  axios from 'axios'

class UserList extends  React.Component{
    constructor(){
        super()
        this.state={
            UserData:[],
            from:{
                num:'',
                email:'',
                tel:'',
                role:'',
                state:'',
            },
            num1:'',
            email1:'',
            tel1:'',
            role1:'',
            visible:false,
        }
        this.columns = [
            {
                title: '序号',
                dataIndex: 'key',
                key:'key',
                // width: 80,
                align:'center',
                backgroundColor:'blue'
            },
            {
                title: '账号',
                dataIndex: 'num',
                key:'num',
                // width: 80,
                align:'center'
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                key:'email',
                ellipsis: true,   //超过宽度将自动省略
                align:'center'
            },
            {
                title: '手机',
                dataIndex: 'tel',
                key:'tel',
                ellipsis: true,
                align:'center'
            },
            {
                title: '角色 ',
                dataIndex: 'role',
                key:'role',
                ellipsis: true,
                align:'center'
            },
            {
                title: '状态',
                prop: "state",
                ellipsis: true,
                align:'center',
                render: function(UserData){
                    return (
                        <button className='State'>
                            {UserData.state}
                        </button>
                    )
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                key:'operation',
                ellipsis: true,
                align:'center',
                render:(a,b)=>
                    <span>
                          <Button style={{marginRight:5}} plain={true} type="info" size="small" onClick={()=>this.edit(a,b)}>编辑</Button>
                           <Button type="danger" size="small" onClick={()=>this.delUser(a,b)}>删除</Button>
                        </span>
            },

        ]
    }
    edit=(a,b)=>{
        // console.log(a,b)
        // this.state.from.num=b.num
        // this.state.from.email=b.email
        // this.state.from.tel=b.tel
        // this.state.from.role=b.role
        this.setState({
              num1:b.num,
              email1:b.email,
              tel1:b.tel,
              role1:b.role,
              visible:true
        });
    }
    handleOk = (a,b) => {
        this.setState({
            visible: false,
        });
        // if(){}else{} 判断输入的值是不是空
        axios({
            url: 'http://123.57.67.148:3000/mock/195/getList',
            method: 'get',
            data:{
                num:this.state.from.num,
                email:this.state.from.email,
                tel:this.state.from.tel,
                role:this.state.from.role,
            }
        }).then(res => {
            console.log(res.data)
            if(res.data.code==='200'){
                let data = res.data.data.filter((item) => {
                    item.key = item.id
                    delete item.id
                    return item
                })
                this.setState({
                    UserData: data
                })
                alert('修改成功')
            }else {
                alert('修改失败')
            }
        })
    };
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    };
    changeNum=(e)=>{
        this.setState({
            num:e.target.value
        })
        // console.log(e.target.value)
    }
    changeEmail=(e)=>{
        this.setState({
            email:e.target.value
        })
        // console.log(e.target.value)
    }
    changeTel=(e)=>{
        this.setState({
            tel:e.target.value
        })
        // console.log(e.target.value)
    }
    Change=(value)=>{
        this.setState({
            state:`${value}`
        })
    }
    changeNum1=(e)=>{
        this.setState({
            num1:e.target.value
        })
    }
    changeEmail1=(e)=>{
        this.setState({
            email1:e.target.value
        })
    }
    changeTel1=(e)=>{
        this.setState({
            tel1:e.target.value
        })
    }
    changeRole1=(value)=>{
        this.setState({
            role1:`${value}`
        })
    }
    delUser=(a,b)=>{ //删除
        axios({
            url:"http://123.57.67.148:3000/mock/195/getList",
            method:'get',
        }).then(res=>{
            console.log(b.state)
            if(b.state==="启用"){
                let data = res.data.data.filter((item) => {
                    item.key = item.id
                    delete item.id
                    return item
                })
                this.setState({
                    UserData: data
                })
                alert('删除成功')
            }else {
                alert('删除失败')
            }
        })
    }
    render() {
        let {UserData} =this.state
        const { Option } = Select;
        return(
            <div >
                <Form inline={true} model={this.state}  className="demo-form-inline">
                    <Form.Item className='from'>
                        <label>
                            账号：<Input value={this.state.num} onChange={this.changeNum} style={{ width: 120 }}/>
                        </label>
                        <label >
                            邮箱：<Input value={this.state.email} onChange={this.changeEmail} style={{ width: 120 }}/>
                        </label>
                        <label>
                            电话：<Input value={this.state.tel} onChange={this.changeTel} style={{ width: 120 }}/>
                        </label>
                        <label>状态：
                            <Select value={this.state.state} onChange={this.Change} defaultValue='启用' style={{width: 100 }}>
                                <Option value="启用">启用</Option>
                                <Option value="禁用">禁用</Option>
                            </Select>
                        </label>
                    </Form.Item>
                    <Form.Item>
                        <Button style={{marginRight:10}} type="primary" onClick={this.search}>搜索</Button>
                        <Button type="primary" onClick={this.chongzhi}>重置</Button>
                    </Form.Item>
                </Form>  //这是搜索
                <Table
                    pagination={{
                        defaultPageSize:5,
                        position:['bottomCenter']
                    }}
                    bordered={true}
                    columns={this.columns}
                    dataSource={UserData}/>
                <Modal          //这是修改
                    title="修改员工信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    // style={{textAlign:'center'}}
                >
                    <div style={{padding:"10px 100px" }}>
                        <label>账号:<input type="text"  value={this.state.num1} onChange={this.changeNum1} /></label>
                    </div>
                    <div style={{padding:"10px 100px" }}>
                        <span>邮箱:</span>
                        <input type="text" value={this.state.email1} onChange={this.changeEmail1} />
                    </div>
                    <div style={{padding:"10px 100px" }}>
                        <span>手机:</span>
                        <input  type="text" value={this.state.tel1} onChange={this.changeTel1}/>
                    </div>
                    <div  style={{padding:"10px 100px" }}>
                    <label>角色：
                        <Select value={this.state.role1}  onChange={this.changeRole1} defaultValue='客户'  style={{width:"100px" }}>
                            <Option value="客户">客户</Option>
                            <Option value="员工">员工</Option>
                        </Select>
                    </label>
                    </div>
                </Modal>
            </div>
        )
    }
    componentDidMount(){
        axios({
            url:'http://123.57.67.148:3000/mock/195/getList',
            method:"get",
        }).then(res=>{
            // console.log(res.data)
            let data = res.data.data.filter(item =>{
                item.key = item.id
                //delete item.id
                return item
            })
            this.setState({
                UserData:data
            })
            // console.log( this.state)
        })
    }
    search=() =>{      //搜索功能
        axios({
            url:'http://123.57.67.148:3000/mock/195/searchUser',
            method: 'post',
            data:{
                num:this.state.from.num,
                email:this.state.from.email,
                tel:this.state.from.tel,
                state:this.state.from.state,
            }
        }).then(res=>{
            console.log(res.data.cood)
            if(res.data.cood==='200'){
                alert('查询成功')
            }else {
                alert('查询失败')
            }
        })
    }

    chongzhi=() =>{ //重置功能
        this.setState({
            num:'',
            email:'',
            tel:'',
            state:'',
        })
    }
    componentWillReceiveProps(){}//跟新props触发，即将废弃
}
export default UserList;